<template>
  <div class="loginvue">
      <div class="con">
         
            <!-- <div class="left-img">
                 <div class="logoimg">
                  <img src="../../assets/login/logo.png" alt="">
                 </div>
            </div> -->
            <div class="logoimg">
                  <!-- <img src="../../assets/login/logo.png" alt=""> -->
                 </div>
            <div class="right-input">
                 
                 <div class="login-con">
                     <div class="title1">欢迎注册</div>
                     <!-- <div class="title1">Wedo 电力能源监控平台</div> -->
                     <div class="username">
                       <img src="../../assets/login/user.png" class="img1"><input type="text" @keydown.enter="loginButton" v-model="username" placeholder="请输入用户名">
                     </div>
                     <div class="password">
                       <img src="../../assets/login/password.png" class="img1">
                       <input type="password" placeholder="请输入密码" @keydown.enter="loginButton" v-model="password" v-show="!switchvpassword">
                       <input type="text" placeholder="请输入密码" @keydown.enter="loginButton" v-model="password" v-show="switchvpassword">
                       <img src="../../assets/login/exit.png" class="img2" @click="switch_fn" v-show="!switchvpassword">
                       <img src="../../assets/login/open.png" class="img2" @click="switch_fn" v-show="switchvpassword">
                     </div>
                     <!-- <el-input  v-model="password"  style="width: 240px"  type="password"  placeholder="Please input password" show-password/> -->
                     
                     <div class="loginbutton" @click="loginButton">
                       立即注册
                     </div>
                     <div class="forget">
                         已有账号？ <span @click="goRouter('/cloudLogin')">点击登录</span>
                     </div>
                 </div>
            </div>
      </div>
  </div>
</template>

<script>
import { useCounterStore } from '../../stores/counter'
import {weblogin} from "../../api/Interface.js";
import {login} from "../../api/abbNewApi.js";
export default {
  data() {
    return {
       username:"",//用户名
       password:"",//密码
       switchvpassword:false,//控制是否显示密码
       baseURL:"",
    };
  },

  mounted() {
    //  this.baseURL = DWSystemSetting.newApiRul
  },

  methods: {
    goRouter(val){
        this.$router.push(val);
    },
    //切换密码可显状态
    switch_fn(){
         this.switchvpassword = !this.switchvpassword
    },
    //登录
    loginButton(){
       var d = {
         'username':this.username,
         'password':this.password,
       }
       
      weblogin(d).then(res => {
        if(res == undefined){
               this.$message.error('登录失败，请检查用户名与密码是否正确')
        }
        // if(res.code == 200){
        //   localStorage.setItem('token',"dengluchenggong")
        //   this.$message({showClose: true,message: '登录成功',type: 'success'});
        // }
         if(res.code == 200){
          //纯净版需要的登录
          localStorage.setItem('token',"dengluchenggong")
          this.$message({showClose: true,message: '登录成功',type: 'success'});
          useCounterStore().setwhetherLogin(true)
          return
          //融合版需要的登录
          let formData = new FormData()
          formData.append('userCode', this.username);
          formData.append('password', hex_md5(this.password));
          formData.append('captcha', 'web:1234');
          formData.append('loginType', 'Web');
          formData.append('isStrongPassword', 0);
          login(formData).then(res => {
               if(res.success){
                  localStorage.setItem("nowWedoSystemUserCode", this.password);
                  localStorage.setItem("token", res.data.pkid);
                  localStorage.setItem("userDetailed", JSON.stringify(res.data));
                  this.$message({showClose: true,message: '登录成功',type: 'success'});
                  useCounterStore().setwhetherLogin(true)
               } 
          })
        }
 
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.loginvue {
   width: 100% !important;
   height: 100% !important;
   margin-top: 0px !important;
   background-color: #fff;
   letter-spacing: 2px;
   padding: 0px !important;

   .con {
      width: 100%;
      height: 100%;
      display: flex;
      background: url(../../assets/login/loginbg.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
       .logoimg {
          position: absolute;
          top: 20px;
          left: 20px;
         }
      .left-img {
         width: 50%;
         height: 100%;
        //  background: url(../../assets/login/leftbg.png) no-repeat;
         background-size: 100% 100%;
        
      }
      .right-input {
          // width: 50%;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .login-con {
             width: 400px;
             height: 420px;
          }
          .title1{
            font-size: 36px;
            color: #1A1A1A;
            white-space: nowrap;
          }
          .username {
             width: 100%;
             height: 48px;
             display: flex;
             align-items: center;
             padding: 0px 20px;
             box-sizing: border-box;
             margin-top: 60px;
             border: 1px solid #E6E6E6;
             margin-bottom: 20px;
             border-radius: 4px;
              background-color: #fff;
             .img1 {
               width: 20px;
               height: 20px;
               margin-right: 2px;
             }
             input {
                width: 320px;
                height: 32px;
                font-size: 16px;
                border-color: transparent;
                box-shadow: inset 0 1px 1px transparent;
             }
          }
          .password {
              width: 100%;
              height: 48px;
              display: flex;
              align-items: center;
              padding: 0px 20px;
              box-sizing: border-box;
              border: 1px solid #E6E6E6;
              background-color: #fff;
              border-radius: 4px;
              .img1 {
                width: 20px;
                height: 20px;
                margin-right: 2px;
              }
              .img2 {
                  width: 20px;
                height: 20px;
                cursor: pointer;
              }
              input {
                  width: 290px;
                  height: 32px;
                  font-size: 16px;
                  border-color: transparent;
                  box-shadow: inset 0 1px 1px transparent;
              }
          }
          .forget {
             margin-top: 30px;
             font-size: 14px;
            //  color: #0052D9;
            //  cursor: pointer;
            text-align: center;
            span {
                font-size: 14px;
                  color: #0052D9;
                  cursor: pointer;
            }
          }
          .loginbutton {
              width: 100%;
              height: 48px;
              background-color: #0052D9;
              border-radius: 4px;
              text-align: center;
              line-height: 48px;
              color: #fff;
              font-size: 18px;
              font-weight: bold;
              margin-top: 60px;
              cursor: pointer;
          }

      }

   }
}
</style>